<template>
  <div>
    <nav>
      <div id="title">
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="12" class="title_nav_left">
            <el-button type="text">您好，欢迎您访问！</el-button>
          </el-col>
          <el-col :span="12" class="title_nav_right">
            <el-button v-if="customerName == null" type="text" @click="dialogFormVisible = true">登录</el-button>
            <el-button v-if="(this.userPageStatus !== '/userEnrollView' && customerName == null) || (this.userPageStatus === null && customerName == null)" type="text" @click="gotoEnrollPage()">
              免费注册
            </el-button>
            <el-button v-if="customerName != null" type="text" @click="gotoPersonalPage()">{{ customerName }}</el-button>
            <el-button v-if="this.userPageStatus !== '/homeView' || this.userPageStatus == null" type="text" @click="gotoHomePage()">返回首页</el-button>

            <el-button v-if="customerName != null" type="text" @click="logout()">退出</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 登录弹出框 -->
      <el-dialog width="30rem" custom-class="loginDialog" :visible.sync="dialogFormVisible" :close-on-click-modal="false" center>
        <span slot="title" class="loginTitleSpan">登录</span>
        <el-form :model="loginForm" class="dialogForm">
          <el-form-item :label-width="formLabelWidth">
            <span slot="label" class="dialogLabel">用户名:</span>
            <el-input v-model="loginForm.userName" class="dialogInput" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth">
            <span slot="label" class="dialogLabel">密码:</span>
            <el-input v-model="loginForm.password" class="dialogInput" autocomplete="off" show-password></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="userLogin(loginForm)">登 录</el-button>
        </div>
      </el-dialog>
    </nav>
  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data() {
    return {
      //用户的页面状态
      userPageStatus: sessionStorage.getItem('userPageStatus'),
      // 登录弹出框数据
      dialogTableVisible: false,
      dialogFormVisible: false,
      customerName: '未登录',
      params: {},
      fileFieldKeys: ['FId', 'FNumber', 'FName', 'F_PKTL_User', 'F_PKTL_PassWord', 'FDocumentStatus'],
      loginForm: {
        userName: '',
        password: '',
      },
      formLabelWidth: '75px',
    }
  },
  created() {
    this.buildParams()
    // 获取用户名称
    this.customerName = sessionStorage.getItem('userName')
    // 获取存在session中的页面信息
    console.log(sessionStorage.getItem('userPageStatus'), '当前页面的位置')
    this.userPageStatus = sessionStorage.getItem('userPageStatus')
  },

  methods: {
    buildParams() {
      this.params = {}
      this.params.FormId = 'PKTL_BidCustomer'
      this.params.FieldKeys = this.fileFieldKeys.toString()
    },
    userLogin() {
      this.params.FilterString = [
        { Left: '(', FieldName: 'F_PKTL_User', Compare: '=', Value: this.loginForm.userName, Right: ')', Logic: 'AND' },
        { Left: '(', FieldName: 'F_PKTL_PassWord', Compare: '=', Value: this.loginForm.password, Right: ')', Logic: 'AND' },
      ]
      let data = { data: this.params }
      this.$api.users
        .executeBillQuery(data)
        .then((res) => {
          console.log(res, '登录的返回结果')
          if (res.length == 0) {
            return Promise.reject(new Error('用户名或密码错误'))
          } else {
            sessionStorage.setItem('userId', res[0][0])
            sessionStorage.setItem('userNo', res[0][1])
            sessionStorage.setItem('userName', res[0][2])
            this.customerName = sessionStorage.getItem('userName')

            this.reload()
            this.dialogFormVisible = false
          }
        })
        .catch((err) => {
          alert(err)
        })
    },
    logout() {
      this.customerName = '未登录'
      sessionStorage.removeItem('userId')
      sessionStorage.removeItem('userNo')
      sessionStorage.removeItem('userName')
      // sessionStorage.removeItem('userPageStatus')
      this.$router.push({ name: 'main' })
      this.reload()
    },
    // 前往个人中心页面
    gotoPersonalPage() {
      const curreentUserId = sessionStorage.getItem('userId')
      // sessionStorage.setItem('userPageStatus', 'PersonalPageView')
      this.$router.push({ path: '/PersonalPageView', query: { curreentUserId: curreentUserId } })
    },
    // 前往首页页面
    gotoHomePage() {
      // sessionStorage.setItem('userPageStatus', 'homeView')
      this.$router.push({ path: '/main' })
    },
    // 前往注册页面
    gotoEnrollPage() {
      // sessionStorage.setItem('userPageStatus', 'userEnrollView')
      this.$router.push({ path: '/userEnrollView' })
    },
  },
}
</script>
<style scoped lang="scss">
#title {
  width: 80%;
  margin: auto;
}
.title_nav_left {
  text-align: left;
}
.title_nav_right {
  text-align: right;
}
nav {
  font-size: 15px;
  font-weight: bold;
  color: #2c3e50;
  padding: 5px;
  background-color: #f2f2f2;
  a {
    color: #2c3e50;
    text-decoration: none;

    &.router-link-exact-active {
      color: #7e17d3;
    }
  }
}
// 登录弹出框的样式
::v-deep .el-dialog {
  background-color: #ececec;
  border-radius: 16px;
}
// 登录弹出框的表头样式
.loginTitleSpan {
  color: #1717ff;
  font-size: 35px;
  text-align: center;
  text-shadow: 2px 2px 5px rgba(29, 45, 133, 0.685);
}
.dialogInput {
  margin: auto;
  width: 95%;
}
.dialogLabel {
  color: #555555;
  font-size: 16px;
  // border: 1px solid blue;
}
</style>